<template>
  <!-- 多刷模式不显示 -->
  <div v-show="!isFilterCallbackMode" class="op-group comp-op-filter">
    <div class="op-title">替换</div>
    <div class="option-item">
      <div v-if="!isShowSub" class="title-row">
        <span class="label">
          <span
            class="view-icon"
            title="预览"
            @mouseleave="onMouseLeave()"
            @mouseenter="onMouseEnter($event, selectionReplaceSelectionKeyword)"
          >
            <img src="~@/assets/dataset/preview.png" alt="preview" />
          </span>
          替换刷选内容为"Null"</span
        >
        <a-button class="op-btn" size="small" @click="showSub">编辑</a-button>
        <a-button
          class="op-btn"
          type="primary"
          size="small"
          @click="replaceNull"
          >确定</a-button
        >
      </div>
      <div v-if="isShowSub" class="detail-panel">
        <div
          v-for="(item, i) in options"
          :key="i"
          class="sub-item"
          :class="{
            active: value === item.value,
          }"
          @click="onCheckItemClicked(item)"
        >
          <span class="check-item">
            <span
              class="view-icon"
              title="预览"
              @mouseleave="onMouseLeave()"
              @mouseenter="onMouseEnter($event, item.value)"
            >
              <img src="~@/assets/dataset/preview.png" alt="preview" />
            </span>
            {{ item.label }}
          </span>
          <div
            :key="'input-' + i"
            class="replace-value-box"
            style="padding-left: 0;"
            :class="{
              active: value === item.value,
            }"
          >
            <a-input
              v-if="item.bindKey !== ''"
              :key="'input-' + i"
              v-model="bindValue[item.bindKey]"
              style="width: 100%;"
              placeholder="Null"
              class="replace-value"
              size="small"
              @input="onInput($event, item)"
            ></a-input>
          </div>
        </div>

        <div class="button-row">
          <a-button class="op-btn-sub" size="small" @click="isShowSub = false"
            >取消</a-button
          >
          <a-button
            class="op-btn-sub"
            type="primary"
            size="small"
            @click="doOption"
            >确定</a-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import DataStore, { OptionPreViewAction } from '@/store/modules/dataview'
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  components: {},
})
export default class SelectionReplace extends Vue {
  /** 操作列表 */
  @Prop({
    type: Array,
    default() {
      return [
        {
          label: '替换刷选内容为',
          value: OptionPreViewAction.selectionReplaceSelectionKeyword,
          bindKey: 'replaceValue',
        },
      ]
    },
  })
  options!: Array<object>

  get isFilterCallbackMode() {
    return DataStore.vrCurrenSetMode !== null
  }

  /** 操作option */
  selectionReplaceSelectionKeyword: string =
    OptionPreViewAction.selectionReplaceSelectionKeyword

  /** 绑定值 */
  value: string = `${OptionPreViewAction.selectionReplaceSelectionKeyword}`

  /** option操作详情展示标识 */
  isShowSub: boolean = false

  /** 操作面板绑定值 */
  bindValue: any = {
    replaceValue: '',
  }

  /** 是否为多刷选模式 */
  get isMutiple() {
    return (
      DataStore.tableSelectionInfo && DataStore.tableSelectionInfo.isMutiple
    )
  }

  /** 事件回调 */
  onInput() {
    this.$nextTick(() => {
      DataStore.setSelectionReplaceKeyword(this.bindValue.replaceValue)
    })
  }

  /** 直接替换成NUll */
  replaceNull() {
    this.bindValue.replaceValue = ''
    this.doOption()
  }

  /** 展示详情 */
  showSub() {
    this.isShowSub = true
  }

  /** 鼠标移入 */
  onMouseEnter(event: any, action: string) {
    const target = event.target as HTMLElement
    if (target) {
      DataStore.setPreviewAction(action)
      DataStore.setHoverYPos(target.getBoundingClientRect().top - 16)
    }
  }

  /** 鼠标移出 */
  onMouseLeave() {
    DataStore.setHoverYPos(-1)
  }

  /** 点击某个操作面板 */
  onCheckItemClicked(item: any) {
    this.value = item.value
  }

  /** 执行操作 */
  doOption() {
    if (
      this.value ===
        `${OptionPreViewAction.selectionReplaceSelectionKeyword}` &&
      DataStore.tableSelectionInfo
    ) {
      this.$emit('actiondone', {
        action: this.value,
        desc: '元格文字选中 > 替换 > 替换刷选内容',
        data: {
          replaceValue: this.bindValue.replaceValue,
        },
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../op.less');
</style>
